<template>
  <div class="container">
    <div class="left-box" >

    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-tabs>
      <el-form-item label="结账手牌" prop="note1">
        <el-input v-model="form.note1" placeholder="请输入手牌号" style="float:left" clearable />
      </el-form-item>

        <!--<el-form-item label="服务员" prop="userName">
          <el-input v-model="form.userName" placeholder="请输入用户账号" />
        </el-form-item>-->

        <el-form-item label="留牌手牌" prop="handBrand">
          <el-input v-model="form.handBrand" placeholder="请输入手牌号" style="float:left" clearable />
        </el-form-item>
      </el-tabs>
    </el-form>

      <br>
     <div class="right" style="float: right;">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">返 回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { listDetails, getDetails, delDetails, addDetails, updateDetails,updatehandDetails } from "@/api/module/cjl/details";

export default {
  name: "Details",
  dicts: ['yqg_hand_category', 'yqg_hand_state', 'yqg_payment_method', 'yqg_consumption_status', 'yqg_retention_status', 'yqg_project_category', 'yqg_post', 'yqg_check_out_status', 'yqg_department', 'yqg_merge_status', 'yqg_sailings_signs', 'yqg_next_clock_status'],
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 消费详细表格数据
      detailsList: [],
      detailsList2: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    // this.getList();
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      if(this.form.note1==null||this.form.handBrand==null){
        this.$modal.msgError("手牌号不能为空");
      }else {
        this.$modal.confirm('是否确认留牌？').then(function () {
        }).then(() => {
          updatehandDetails(this.form).then(response => {
            this.$modal.msgSuccess("留牌成功");
            // this.getList();
          }).catch(() => {
          });
        });
      }
    },
    // 取消按钮
    cancel() {
      this.$emit("closeDialog");
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        userId: null,
        deptId: null,
        department: null,
        nickName: null,
        userName: null,
        post: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        retentionStatus: null,
        mergeStatus: null,
        openingTime: null,
        drawTime: null,
        mergeHands: null,
        mergeBarBillsId: null,
        leaveTime: null,
        beforeLeave: null,
        beforeBarBillsId: null,
        entryName: null,
        projectCategory: null,
        projectCode: null,
        mnemonicCode: null,
        unit: null,
        unitPrice: null,
        commissionPrice: null,
        together: null,
        sailingsSigns: null,
        barBillsId: null,
        recordingTime: null,
        quantity: null,
        totalAmount: null,
        seat: null,
        orderNumber: null,
        paymentMethod: null,
        consumptionStatus: null,
        chargebackTime: null,
        reasonForChargeback: null,
        chargebackProcessorAccount: null,
        chargebackProcessorName: null,
        clockTime: null,
        nextClockTime: null,
        nextClockStatus: null,
        recordEmployeeNumber: null,
        recorderEmployeeName: null,
        roomType: null,
        openingHours: null,
        checkOutTime: null,
        checkOutStatus: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
  }
};
</script>
<style scoped>
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  .left-box {
    flex: 1;
  }
  .right-box {
    flex: 1;
  }
</style>
